<template>
	<view class="page">
		<view class="loading" v-if="isSend">
			<image class="loading-icon" src="../../../static/chat1.png" mode=""></image>
		</view>
		<view class="tab">
			<view :class="['box',typeBox==0 ? 'typeActive' : '']" @click="type1">
				创作中心
			</view>
			<view :class="['box',typeBox==1 ? 'typeActive' : '']" @click="type2">
				生成记录
			</view>
		</view>
		<view v-if="typeBox==0">
			<view class="painting_title">
				绘画描述
			</view>
			<view class="painting_content">
				<textarea v-model="inputText" placeholder="请上传您需要卡通化的图片。或输入绘画描述词。" maxlength="500"
					placeholder-style="color: #999999;" cols="30" rows="10"></textarea>
				<view class="bottom">
					<text @click="clearInputText">清除文本</text>
					<text class="number">{{ remainingChars }}/255</text>
				</view>
			</view>
			<view class="example" v-if="aiuseLabelListVoList.length > 0">
				<text>示例：</text>
				<view class="box" v-for="(item,index) in aiuseLabelListVoList" :key="index"
					@click="clickLabel(item.name)">
					{{item.name}}
				</view>
			</view>
			<view class="painting_title">
				上传参考图
			</view>
			<view class="uploadList">
				<image v-if="imgPath" class="add" :src="imgPath" mode=""></image>
				<view class="add" @click="changeAvatarUrl">+</view>
			</view>
			<view class="painting_title">
				绘画风格
			</view>
			<view class="huihua">
				<view @click="activeStyleFunc(index)" :class="['item',index==activeStyle ? 'active1' : '']"
					v-for="(item,index) in styleList">
					<view class="tex">
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="painting_title">
				图片比例
			</view>
			<view class="bili">
				<view @click="activeImageRateFunc(index)" :class="['item',activeImageRate==index ? 'active2' : '']"
					v-for="(item,index) in imageRateList">
					<view class="box1"></view>
					<view class="tex">{{item.value}}</view>
					<view class="tex">{{item.name}}</view>
				</view>
			</view>

			<view class="painting_title">
				视角
			</view>
			<view class="shijiao">
				<view class="item" @click="activeVisualAngleFunc(index)"
					:class="['item',activeVisualAngle==index ? 'active3' : '']" v-for="(item,index) in visualAngleList">
					<view class="box"></view>
					<view>{{item.name}}</view>
				</view>
			</view>

			<view class="painting_title">
				灯光
			</view>
			<view class="bili">
				<view @click="activeLightingFunc(index)" :class="['item',activeLighting==index ? 'active2' : '']"
					v-for="(item,index) in lightingList">
					<view class="box1"></view>
					<!-- <view class="tex">{{item.value}}</view> -->
					<view class="tex">{{item.name}}</view>
				</view>
			</view>

			<view class="foot">
				<view class="btn" @click="sendMsg">
					开始绘制
				</view>
			</view>

		</view>
		<view v-else>
			<view class="historyList">
				<view class="item" v-for="(item,index) in aiuseHistoryListVoList">
					<view class="head">
						<text class="name">AI机器人</text>
						<text class="time">{{item.createTime}}</text>
						<image class="close" src="../../../static/aiclose.png" mode=""></image>
					</view>

					<view class="tex">
						{{item.content}}
					</view>

					<view class="imgList">
						<view class="itemImg">
							<!-- 	<image v-if="selectedItems[index] == 0" :src="item.returnContent" mode=""></image>
							<image v-else :src="item.selectedContent" mode=""></image> -->
							<image :src="selectedItems[index] == 0 ? item.returnContent : item.selectedContent" mode=""
								@click="previewImage(selectedItems[index] == 0 ? item.returnContent : item.selectedContent)">
							</image>
							<view class="save"
								@click="downloadImage(selectedItems[index] == 0 ? item.returnContent : item.selectedContent)">
								保存</view>
						</view>

						<view class="newList">
							<view :class="selectedItems[index] == 0?'new image-selected': 'new'"
								@click="selectIndexImage(index,0)">
								四宫格
							</view>
							<view :class="selectedItems[index] == 1?'new image-selected': 'new'"
								@click="selectIndexImage(index,1)">
								第一张
							</view>
							<view :class="selectedItems[index] == 2?'new image-selected': 'new'"
								@click="selectIndexImage(index,2)">
								第二张
							</view>
							<view :class="selectedItems[index] == 3?'new image-selected': 'new'"
								@click="selectIndexImage(index,3)">
								第三张
							</view>
							<view :class="selectedItems[index] == 4?'new image-selected': 'new'"
								@click="selectIndexImage(index,4)">
								第四张
							</view>
						</view>

						<!-- <view class="new">
							重新生成
						</view> -->
					</view>
				</view>
			</view>
		</view>
		<!-- 上传照片 -->
		<Upload v-if="isUpload" :num='1' @getImgs="getImgsFunc"></Upload>
	</view>
</template>

<script>
	import Upload from '@/components/upload/upload.vue';
	export default {
		components: {
			Upload
		},
		data() {
			return {
				typeBox: 0,
				inputText: '',
				maxChars: 255,
				// imgPath: 'http://ruiyu.oss-cn-hangzhou.aliyuncs.com/image/newSaas/default.png',
				imgPath: '',
				isUpload: false,
				aiType: '',
				aiuseId: '',
				platformId: '',
				isSend: false,
				aiuseLabelListVoList: [],
				aiuseHistoryListVoList: [],
				taskId: '', //请求的图片内容序列taskId
				taskIdAction: '', //请求的图片内容序列taskId
				// taskId:'1717994305970616',//请求的图片内容序列taskId
				intervalId: '',
				activeStyle: 0,
				style: '',
				styleList: [{
						name: '可爱的',
						value: 'Cute'
					}, {
						name: 'Q版',
						value: 'Chibi'
					}, {
						name: '闪闪发光',
						value: 'Sparkling'
					},
					{
						name: '宫崎骏风',
						value: 'Miyazaki'
					}, {
						name: '日本漫画',
						value: 'Japanese comics'
					}, {
						name: '吉卜力风格',
						value: 'Ghibli Studio'
					},
					{
						name: '二次元',
						value: 'ACGN'
					}, {
						name: '新海诚',
						value: 'Makoto Shinkai'
					}, {
						name: '童话故事',
						value: 'stock ilustration style'
					}
				], //风格
				activeImageRate: 0,
				imageRate: '',
				imageRateList: [{
					name: '头像匡',
					value: '1:1'
				}, {
					name: '手机壁纸',
					value: '1:2'
				}, {
					name: '电脑壁纸',
					value: '16:9'
				}, {
					name: '宣传海报',
					value: '9:16'
				}], // 图片比例
				activeVisualAngle: 0,
				visualAngle: '',
				visualAngleList: [{
						name: '鸟瞰图',
						value: "Bird's Eye View"
					}, {
						name: '倾斜移位',
						value: 'Tilt Shift'
					}, {
						name: '卫星视图',
						value: 'Satellite View'
					},
					{
						name: '立面透视',
						value: 'Elevation Perspective'
					}, {
						name: '第一人称视角',
						value: 'First Person View'
					}, {
						name: '底视图',
						value: 'Bottom View'
					},
					{
						name: '肖像',
						value: 'Portrait'
					}, {
						name: '电影镜头',
						value: 'Cinematic Shot'
					}, {
						name: '产品视图',
						value: 'Product View'
					}
				], //视图
				activeLighting: 0,
				lighting: '',
				lightingList: [{
						name: '体积照明',
						value: "Volumetric Lighting"
					}, {
						name: '冷光',
						value: 'Cold Light'
					}, {
						name: '情绪照明',
						value: 'Mood Lighting'
					}, {
						name: '明亮的',
						value: 'Bright'
					},
					{
						name: '黄昏射线',
						value: 'Crepuscular Ray'
					}, {
						name: '荧光灯',
						value: 'Fluorescent Light'
					}, {
						name: '柔光',
						value: 'Soft lights'
					}, {
						name: '柔和的照明',
						value: 'Soft illumination'
					}
				], //灯光
				images: [],
				options: [],
				selectedItems: []
			}
		},
		computed: {
			remainingChars() {
				return this.inputText.length;
			}
		},
		onLoad(options) {
			this.aiuseId = options.aiuseId;
			this.platformId = options.platformId;
			if (this.platformId == 3) { //GPT3.5
				this.aiType = 'gpt3.5';
			} else if (this.platformId == 4) { //gpt4
				this.aiType = 'gpt4';
			} else if (this.platformId == 5) { //mj
				this.aiType = 'mj';
			} else if (this.platformId == 6) { //gpt4o
				this.aiType = 'gpt4o';
			} else if (this.platformId == 7) { //dalle3
				this.aiType = 'dalle3';
			} else {
				this.platformId = 5;
				this.aiType = 'mj';
			}
			//获取应用详情
			this.getApplicationDetail();
			// this.queryImgResult();
		},
		methods: {
			previewImage(imageUrl) {
				uni.previewImage({
					urls: [imageUrl], // 预览图片的链接列表
					current: imageUrl // 当前显示图片的链接
				});
			},
			downloadImage(imageUrl) {
				uni.downloadFile({
					url: imageUrl,
					success: (downloadResult) => {
						if (downloadResult.statusCode === 200) {
							// #ifdef MP-WEIXIN
							uni.saveImageToPhotosAlbum({
								filePath: downloadResult.tempFilePath,
								success: () => {
									uni.showToast({
										title: '图片保存成功'
									});
								},
								fail: (err) => {
									console.error(err);
									uni.showToast({
										title: '图片保存失败',
										icon: 'none'
									});
								}
							});
							// #endif

							// #ifdef H5
							const link = document.createElement('a');
							link.href = downloadResult.tempFilePath;
							link.download = 'downloaded-image.jpg';
							document.body.appendChild(link);
							link.click();
							document.body.removeChild(link);
							uni.showToast({
								title: '图片保存成功'
							});
							// #endif

							// #ifdef APP-PLUS
							plus.gallery.save(downloadResult.tempFilePath, function() {
								uni.showToast({
									title: '图片保存成功'
								});
							}, function(err) {
								console.error(err);
								uni.showToast({
									title: '图片保存失败',
									icon: 'none'
								});
							});
							// #endif
						} else {
							uni.showToast({
								title: '图片下载失败',
								icon: 'none'
							});
						}
					},
					fail: () => {
						uni.showToast({
							title: '图片下载失败',
							icon: 'none'
						});
					}
				});
			},

			/* 修改头像 */
			changeAvatarUrl() {
				let self = this;
				if (self.isUpload) {
					uni.showToast({
						title: '再次点击更改头像',
						icon: 'none'
					})
				}
				self.isUpload = !self.isUpload;
			},
			/*获取上传的图片*/
			getImgsFunc(e) {
				let self = this;
				self.isUpload = false;
				if (e && typeof(e) != 'undefined') {
					let self = this;
					this.imgPath = e[0].filePath
				}
			},

			clickLabel(content) {
				this.inputText = content;
			},
			clearInputText() {
				this.inputText = '';
			},
			/*获取数据*/
			getApplicationDetail() {
				let self = this;
				self._get('plus/aiuse/aiuse/detail', {
					appId: self.getAppId(),
					aiuseId: this.aiuseId
				}, function(res) {
					self.aiuseLabelListVoList = res.data.aiuseLabelListVoList;
					self.aiuseHistoryListVoList = res.data.aiuseHistoryListVoList;
					if (self.aiuseHistoryListVoList && self.aiuseHistoryListVoList.length > 0) {
						for (var i = 0; i < self.aiuseHistoryListVoList.length; i++) {
							if (!self.selectedItems[i]) {
								self.selectedItems[i] = 0;
							}
						}
					}
					if (res.data.platformId) {
						self.platformId = res.data.platformId;
					}
				});
			},
			activeStyleFunc(index) {
				this.activeStyle = index
				this.style = this.styleList[index].value;
			},
			activeImageRateFunc(index) {
				this.activeImageRate = index
				this.imageRate = this.imageRateList[index].value;
			},
			activeVisualAngleFunc(index) {
				this.activeVisualAngle = index
				this.visualAngle = this.visualAngleList[index].value;
			},
			activeLightingFunc(index) {
				this.activeLighting = index;
				this.lighting = this.lightingList[index].value;
			},
			type1(e, index) {
				this.typeBox = 0
			},
			type2(e, index) {
				this.typeBox = 1;
				//重新获取应用详情
				this.getApplicationDetail();
			},
			handleInput() {
				if (this.inputText.length > this.maxChars) {
					this.inputText = this.inputText.substring(0, this.maxChars);
				}
			},
			sendMsg() {
				let self = this;
				self.isSend = true;
				this.options = [{
						name: 'style',
						value: this.style
					},
					{
						name: 'imageRate',
						value: this.imageRate
					},
					{
						name: 'visualAngle',
						value: this.visualAngle
					},
					{
						name: 'lighting',
						value: this.lighting
					}
				];
				if (self.imgPath && self.imgPath != '') {
					self.images = [self.imgPath];
				}


				self._postAIBody('ai/image/generate', {
					prompt: self.inputText,
					aiType: self.aiType,
					platformId: self.platformId,
					aiuseId: self.aiuseId,
					options: self.options,
					images: self.images
				}, function(res) {
					self.taskId = res.data;
					// self.showText = true
					// self.text = res.data
					// self.isSend = false
					// uni.navigateTo({
					// 	url:'../../aiuse/writing/detail?val='+res.data + '&type=' + 'edit' + '&title=' + self.inputText
					// })
					self.inputText = ''
					// self.startTyping();
					self.intervalId = setInterval(self.queryImgResult, 10000)
				});
			},
			queryActionImgResult(index) {
				let self = this;
				self._postAIBody('ai/image/query', {
					taskId: this.taskIdAction,
					aiType: this.aiType,
					platformId: this.platformId,
					aiuseId: self.aiuseId,
					appId: this.getAppId(),
					isTaskAction: 1
				}, function(res) {
					//若已经完成，则停止计时器
					if (res.data.progress == '100%') {
						clearInterval(self.intervalId);
						//关闭loading图标
						self.isSend = false;
						//获取到的图片路径
						self.aiuseHistoryListVoList[index].selectedContent = res.data.imageUrl;
					}
				});
			},
			queryImgResult() {
				let self = this;
				self._postAIBody('ai/image/query', {
					taskId: this.taskId,
					aiType: this.aiType,
					platformId: this.platformId,
					aiuseId: self.aiuseId,
					appId: this.getAppId(),
					isTaskAction: 0
				}, function(res) {
					//若已经完成，则停止计时器
					if (res.data.progress == '100%') {
						clearInterval(self.intervalId);
						//关闭loading图标
						self.isSend = false;
						//切换到生成记录界面
						self.type2();

					}
				});
			},
			selectIndexImage(index, value) {
				this.selectedItems[index] = value;
				if (value != 0) {
					var actionIndex = value - 1;
					var aiuseHistoryAction = this.aiuseHistoryListVoList[index].aiuseHistoryActionList[actionIndex]
					let self = this;
					self.isSend = true;

					self._postAIBody('ai/image/action', {
						taskId: aiuseHistoryAction.taskId,
						aiType: this.aiType,
						platformId: this.platformId,
						customId: aiuseHistoryAction.customId,
						appId: this.getAppId()
					}, function(res) {
						//关闭loading图标
						self.isSend = false;
						var isFinish = res.data.isFinish;
						var content = res.data.content;
						if (isFinish == 1) {
							self.isSend = false;
							self.aiuseHistoryListVoList[index].selectedContent = res.data.content;
						}
						//未完成的，需要进行查询
						else {
							self.taskIdAction = res.data.taskIdAction;
							self.intervalId = setInterval(self.queryActionImgResult, 10000, index);
						}
					});
				}
			}
		}
	}
</script>

<style>
	page {
		background: #F6F6F6;
		min-height: 0;
	}

	.loading {
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 99;
	}

	.loading-icon {
		animation: spin 1s infinite linear;
		width: 100rpx;
		height: 100rpx;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}
</style>
<style lang='css' scoped>
	.page {
		padding-top: 40rpx;
		padding-bottom: 300rpx;
	}

	.active1 {
		background-color: #FFFFFF !important;
		outline: 1rpx solid #2168EA !important;

		.tex {
			background-color: #2168EA !important;
		}
	}

	.active2 {
		background-color: #FFFFFF !important;
		outline: 1rpx solid #2168EA !important;
	}

	.active3 {
		.box {
			background-color: #FFFFFF !important;
			outline: 1rpx solid #2168EA !important;
		}
	}

	.tab {
		display: flex;
		width: 350rpx;
		height: 60rpx;
		background: #FFFFFF;
		border-radius: 30rpx;
		border: 1px solid #2168EA;
		font-weight: 500;
		font-size: 24rpx;
		color: #666666;
		margin: 0 auto;
		margin-bottom: 68rpx;

		.box {
			display: flex;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 50%;
		}

		.typeActive {
			width: 60%;
			background: #2168EA;
			border-radius: 30rpx;
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}

	.painting_title {
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		padding-left: 16rpx;
		border-left: 5rpx solid #2168EA;
		line-height: 28rpx;
		margin-left: 30rpx;
		margin-bottom: 25rpx;
	}

	.painting_content {
		width: calc(650rpx - 56rpx);
		/* height: calc(250rpx - 60rpx); */
		background: #FFFFFF;
		border-radius: 20rpx;
		border: 2px solid #2168EA;
		padding: 30rpx 28rpx;
		margin: 0 50rpx;
		margin-bottom: 40rpx;

		textarea {
			font-weight: 300;
			font-size: 24rpx;
			height: 320rpx;
			width: 100%;
		}

		.bottom {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-weight: 300;
			font-size: 24rpx;
			color: #2168EA;
		}
	}

	.example {
		margin-left: 57rpx;
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		margin-bottom: 62rpx;

		.box {
			padding: 12rpx 30rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			border: 1px solid #B5B5B5;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}
	}

	.uploadList {
		margin: 0 53rpx;
		margin-bottom: 70rpx;
		display: flex;
		align-items: center;
		gap: 20rpx;

		.add {
			width: 200rpx;
			height: 200rpx;
			background: #EEEEEE;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: 500;
			font-size: 36rpx;
			color: #2168EA;
		}
	}

	.huihua {
		margin: 25rpx 50rpx 90rpx 50rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;

		.item {
			width: 200rpx;
			height: 200rpx;
			background: #EEEEEE;
			border-radius: 20rpx;
			position: relative;

			.tex {
				width: 200rpx;
				height: 50rpx;
				background: #BFBFBF;
				border-radius: 0rpx 0rpx 20rpx 20rpx;
				position: absolute;
				bottom: 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #FFFFFF;
			}
		}

	}

	.bili {
		display: flex;
		flex-wrap: wrap;
		margin: 0 50rpx;
		gap: 14rpx;
		margin-bottom: 90rpx;

		.item {
			width: 150rpx;
			height: 200rpx;
			background: #EEEEEE;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		.box1 {
			width: 50rpx;
			height: 50rpx;
			background: #BFBFBF;
			margin-top: 32rpx;
			margin-bottom: 32rpx;
		}

		.box2 {
			width: 30rpx;
			height: 59rpx;
			background: #BFBFBF;
			margin-top: 28rpx;
			margin-bottom: 28rpx;
		}

		.box3 {
			width: 60rpx;
			height: 34rpx;
			background: #BFBFBF;
			margin-top: 40rpx;
			margin-bottom: 40rpx;
		}

		.box4 {
			width: 34rpx;
			height: 60rpx;
			background: #BFBFBF;
			margin-top: 28rpx;
			margin-bottom: 28rpx;
		}

		.tex {

			font-weight: 300;
			font-size: 24rpx;
			color: #999999;
			line-height: 36rpx;
		}
	}

	.shijiao {
		margin: 25rpx 50rpx 90rpx 50rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 25rpx;
		margin-bottom: 90rpx;

		.item {
			text-align: center;
			font-weight: 300;
			font-size: 24rpx;
			color: #333333;

			.box {
				width: 200rpx;
				height: 200rpx;
				background: #EEEEEE;
				border-radius: 20rpx;
				margin-bottom: 18rpx;
			}
		}
	}

	.foot {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 140rpx;
		background-color: white;
		position: fixed;
		bottom: 0;

		.btn {
			width: 500rpx;
			height: 70rpx;
			line-height: 70rpx;
			background: #2168EA;
			border-radius: 35rpx;
			font-weight: 400;
			font-size: 32rpx;
			color: #FFFFFF;
			text-align: center;
		}
	}

	.historyList {
		.item {
			padding: 30rpx;

			.head {
				display: flex;
				align-items: center;
				margin-bottom: 34rpx;

				.name {
					width: 130rpx;
					height: 45rpx;
					line-height: 45rpx;
					background: #2168EA;
					border-radius: 10rpx;
					text-align: center;
					font-weight: 500;
					font-size: 24rpx;
					color: #FFFFFF;
					margin-right: 20rpx;
				}

				.time {
					font-weight: 300;
					font-size: 24rpx;
					color: #999999;
					flex: 1;
				}

				.close {
					width: 24rpx;
					height: 36rpx;
				}
			}

			.tex {
				margin-bottom: 40rpx;
				font-weight: 300;
				font-size: 24rpx;
				color: #333333;
				line-height: 34rpx;
			}

			.imgList {

				.itemImg {
					margin-bottom: 40rpx;
					position: relative;
					width: fit-content;

					image {
						width: 400rpx;
						height: 400rpx;
						border-raid: 10rpx
					}

					.save {
						position: absolute;
						right: 0;
						top: 0;
						display: flex;
						align-items: center;
						justify-content: center;
						width: 80rpx;
						padding: 6rpx 0;
						border-radius: 30rpx;
						color: #FFFFFF;
						background-color: rgba(0, 0, 0, 0.6);
					}
				}

				.newList {
					display: flex;
					align-items: flex-end;
					flex-wrap: wrap;
					gap: 10rpx;
				}

				.new {
					font-weight: 300;
					font-size: 28rpx;
					color: #2168EA;
					line-height: 50rpx;
					border: 1rpx solid #2168EA;
					border-radius: 10rpx;
					padding: 0 6rpx;
				}

				.image-selected {
					background: #2168EA;
					border: 1rpx solid #2168EA;
					color: white;
				}
			}
		}
	}
</style>